<template>
  <Layout ref="load" class="microshop-recruitmentlogo bg-f8">
    <Navbar :isMenu="false" />
    <div>
      <div class="box">
        <div class="img" :style="'maxHeight:'+imgHeight">
          <img :src="mic_reclogo" :onerror="$ERRORPIC.noAvatar" />
        </div>
        <div class="fixed-foot-btn-group">
          <van-uploader :after-read="onRead" accept="image/png, image/jpeg" class="btn-upload">
            <van-button size="normal" type="danger" round block>上传店招Logo</van-button>
          </van-uploader>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import sfc from "@/utils/create";
import { Uploader } from "vant";
import { getSession } from "@/utils/storage";
import { GET_SHOPSET } from "@/api/microshop";
export default sfc({
  name: "microshop-recruitmentlogo",
  data() {
    return {
      mic_reclogo: null
    };
  },
  computed: {
    imgHeight() {
      return document.body.offsetWidth - 30 + "px";
    },
    microshop_name() {
      return getSession("set").microshop_name
        ? getSession("set").microshop_name
        : "";
    },
    microshop_introduce() {
      return getSession("set").microshop_introduce
        ? getSession("set").microshop_introduce
        : "";
    },
    microshop_logo() {
      return getSession("set").microshop_logo
        ? getSession("set").microshop_logo
        : "";
    },
    shopRecruitment_logo() {
      return getSession("set").shopRecruitment_logo
        ? getSession("set").shopRecruitment_logo
        : "";
    }
  },
  mounted() {
    this.mic_reclogo = this.shopRecruitment_logo;
    this.$refs.load.success();
  },
  methods: {
    onRead({ file }) {
      const $this = this;
      const maxSize = 1024;
      let fileSize = file.size / 1024;
      if (fileSize > maxSize) {
        $this.$Toast(`${file.name}图片大小不能超过1M`);
      } else {
        let param = new FormData();
        param.append("file", file);
        $this.$Toast.loading({
          message: "上传中...",
          duration: 0,
          forbidClick: true,
          loadingType: "circular"
        });

        let params = {
          microshop_logo: $this.microshop_logo,
          microshop_name: $this.microshop_name,
          microshop_introduce: $this.microshop_introduce
        };

        $this.$store
          .dispatch("uploadImages", param)
          .then(res => {
            params.shopRecruitment_logo = res.data.src.toString();
            $this.mic_reclogo = res.data.src.toString();
            GET_SHOPSET(params).then(data => {
              $this.$store.dispatch("getMicroshopInfo").then();
            });
            $this.$Toast.clear();
            $this.$Toast.success("上传成功！");
            setTimeout(() => {
              $this.$router.go(-1);
            }, 500);
          })
          .catch(error => {
            $this.$Toast.clear();
            console.log(error);
            $this.$Toast.fail("上传失败！");
          });
      }
    }
  },
  components: {
    [Uploader.name]: Uploader
  }
});
</script>

<style scoped>
.box {
  display: flex;
  height: calc(100vh - 120px);
  align-items: center;
  justify-content: center;
}

.img {
  margin: 46px 15px 44px;
  overflow: hidden;
  max-width: 100%;
}

.img img {
  width: 100%;
  height: 100%;
  display: block;
}

.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.btn-upload {
  width: 100%;
}
</style>
